<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/swiper.min.js' %}"></script>
    <script src="{% static 'js/vue.js' %}"></script>
    <script src="https://cdn.bootcss.com/reqwest/2.0.5/reqwest.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:;" name="we"><img alt="源工作室" src="{% static 'img/logo.png' %}">源工作室</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#gongzuoshi">工作室</a></li>
                <li><a href="#gongzuo">我们工作</a></li>
                <li><a href="#lianxi">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="detail container" id="content">
    <div class="con_main">
        <h2 class="title" v-text="title"></h2>
        <div class="images">
            <div class="for_box" v-for="item in img">
                <p class="img-description"></p>
                <img :src="item" alt="源工作室">
            </div>
        </div>
    </div>
    <div class="rt_box">
        <div class="header_box">
            <span>￥<i v-text="money">30000</i></span>
            <p>案例参考价</p>
        </div>
        <p class="opreator-wrap"></p>
        <div class="dtl_box">
            <span v-text="item" v-for="item in xinxi" class="tit-wrap"></span>
        </div>
    </div>
</div>
<div class="call" id="lianxi">
    <div class="container">
        <div class="title">
            Connection Us
            <br>
            <span>已有“{{ user_data.times }}”人走在了您的前方，还不尽快留下您的足记</span>
            <!--<span>已有“{{ user_data|length }}”人走在了您的前方，还不尽快留下您的足记</span>-->
        </div>
        <div class="from">
            <div class="form-group">
                <input type="text" class="fml" id="userName" name="name" placeholder="名      字">
                <input type="tel" class="fml" id="phone" name="tel" placeholder="手 机 号">
                <textarea id="textArea" class="fml" rows="3" name="text" placeholder="说点什么吧"></textarea>
                <button id="index_get" type="submit" class="btn btn-default">预 约</button>
            </div>
        </div>
        <ul class="nav nav-pills nav-stacked navbar-left">
            <li role="presentation">联 系 我 们</li>
            <li role="presentation">邮 箱：{{ connect_us.e_mail }}</li>
            <li role="presentation">电 话：{{ connect_us.tel }}</li>
            <li role="presentation">地 址：{{ connect_us.address }}</li>
        </ul>
    </div>
</div>
</body>
<script>
        $(function () {
            var content = new Vue({
                el:"#content",
                data:{
                    id:'',
                    title:'',
                    img:[],
                    money:'',
                    data_id:'',
                    xinxi:[]
                },
                methods:{
                    get_id:function(name){
                        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                        var r = window.location.search.substr(1).match(reg);
                        if(r!=null)return  unescape(r[2]); return null;
                    },
                    getList:function(){
                        var self = this;
                        this.data_id = this.get_id("id");
                        $.get('http://cs.luckykiss.xin/1.php?tag=qiye&id='+this.data_id,function(data){
                            data = JSON.parse(data);
                            if($(data)[0].title.indexOf("查看案例及模板请登录")>0){
                                $(data)[0].title = $(data)[0].title.substring(0,$(data)[0].title.indexOf("查看案例及模板请登录"))
                            }
                            self.title = $(data)[0].title;
                            self.img = $(data)[0].img.split(',');
                            self.money = $(data)[0].money;
                            self.xinxi = $(data)[0].xinxi.split(',');
                        })

                    }
                },
                beforeMount:function(){
                    this.getList();
                }
            });
        });
    $("#index_get").click(function(){
        reqwest({
            url: '{% url "web_index_" %}'
            , method: 'get'
            , data: { name: $("#userName").val(), tel: $("#phone").val(), text:$("#textArea").val()}
            , success: function (resp) {
                alert(resp);
                $('#result').html(resp);
            }
            , error: function (resp) {
                alert("出现某种异常，请稍后重试。");
            }
        })
    });
</script>
</html>